import React, { Component, useEffect } from "react";
import { View, Text, Picker } from "@tarojs/components";
import { getCurrentInstance } from "@tarojs/taro";
import { AtButton, AtInput, AtList, AtListItem } from "taro-ui";
import { AtIconBaseProps } from "taro-ui/types/base";
import { TitleColor, TextRow } from "../../components/text";
import { useSetTitle } from "../../hooks";
import "./index.scss";
import { userAddress } from "../../type";
import { processCity, UserAddress, UserId } from "../../util";
import { useState } from "react";
import { Card } from "../../components/layout";
const CONFIG = [
  {
    title: '新建寄件人',
    name: '寄件人',
    placeholderName: '请输入寄件人姓名',
    placeholderPhone: '请输入寄件人电话',
    address: '寄件地址',
    postcode: '寄件地邮编'

  }, {
    title: '新建收件人',
    name: '收件人',
    placeholderName: '请输入收件人姓名',
    placeholderPhone: '请输入收件人电话',
    address: '收货地址',
    postcode: '收货地邮编'

  }
]

let current = 0;
export default function () {
  let param = getCurrentInstance().router.params;
  if (param.type = 'sender') {
    current = 0
  } else {
    current = 1
  }
  param = null;
  useSetTitle(CONFIG[current].title);

  let [name, setName] = useState('');
  let [phone, setPhone] = useState('');
  let [postcode, setPostcode] = useState('');
  let [address, setAddress] = useState<string[]>([]);
  let [detail, setDetail] = useState('');

  // let [rName, setRName] = useState('');
  // let [rPhone, setRPhone] = useState('');
  // let [rPostcode, setRPostcode] = useState('');
  // let [rAddress, setRAddress] = useState<string[]>([]);

  // let [sName, setSName] = useState('');
  // let [sPhone, setSPhone] = useState('');
  // let [sPostcode, setSPostcode] = useState('');
  // let [sAddress, setSAddress] = useState<string[]>([]);
  return (
    <View>
      <Card className="box">
        <TitleColor>{CONFIG[current].name}</TitleColor>
        <AtInput title='姓名' placeholder={CONFIG[current].placeholderName}
          value={name} name='name' onChange={value => { setName(value.toString()) }} type='text'></AtInput>
        <AtInput title='电话' placeholder={CONFIG[current].placeholderPhone}
          value={phone} name='phone' onChange={value => { setPhone(value.toString()) }} type='phone'></AtInput>
        <Picker mode='region' value={address} onChange={value => {
          setAddress(value.detail.value);
          setPostcode(value.detail.postcode);
        }}>
          <TextRow left={CONFIG[current].address} right={processCity(address)} />
        </Picker>
        <TextRow left={CONFIG[current].postcode} right={postcode} />
        <AtInput name='detail' title='详细地址' border={false} placeholder='请输入详细地址' type='text' value={detail} onChange={value => setDetail(value.toString())}></AtInput>
      </Card>
      <AtButton type='primary' customStyle='margin-top:25px'>保存</AtButton>
      {/* <View className='white mlr mt radio recipient'>
        <TitleColor>收件人</TitleColor>
        <AtInput title='姓名' placeholder='请输入收件人姓名'
          value={rName} name='recipient_name' onChange={value => { setRName(value.toString()) }} type='text'></AtInput>
        <AtInput title='电话' placeholder='请输入收件人电话'
          value={rPhone} name='recipient_phone' onChange={value => { setRPhone(value.toString()) }} type='phone'></AtInput>
        <Picker mode='region' value={rAddress} onChange={value => {
          setRAddress(value.detail.value);
          setRPostcode(value.detail.postcode);
        }}>
          <TextRow left='收货地址' right={processCity(rAddress)} />
        </Picker>
        <TextRow left='收货地邮编' right={rPostcode} />
      </View>
      <View className='white mlr mt radio sender'>
        <TitleColor>寄件人</TitleColor>
        <AtInput title='姓名' placeholder='请输入寄件人姓名'
          value={sName} name='sender_name' onChange={value => { setSName(value.toString()) }} type='text'></AtInput>
        <AtInput title='电话' placeholder='请输入寄件人电话'
          value={sPhone} name='sender_phone' onChange={value => { setSPhone(value.toString()) }} type='phone'></AtInput>
        <Picker mode='region' value={sAddress} onChange={value => {
          setSAddress(value.detail.value);
          setSPostcode(value.detail.postcode);
        }}>
          <TextRow left='寄件地址' right={processCity(sAddress)} />
        </Picker>
        <TextRow left='寄件地邮编' right={sPostcode} />
      </View> */}
    </View>
  )
}